<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>俄罗斯方块</title>
    <!--设置初始比例（1：1像素还原）-->
    <style>
                
        /*reset start*/
        body,p,h2,ul{
            margin: 0;
            padding: 0;
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        img{
            border:none;
            vertical-align: top;
            width: 100%;
        }
        a{
            text-decoration: none;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            -webkit-tap-highlight-color:transparent;
        }
        body{
            font-family:Helvetica, "Microsoft YaHei", Arial, Helvetica, sans-serif;
            background-color: #f6f7f6;
            font-size: 0.6rem;
            color: #fff;
        }
        html,body{
            width:100%;
            height: 100%;
        }
        h2{
            font-weight:normal;
        }
        section,header,footer{
            display: block;
        }

        /*reset end*/

        /*index start*/

        .container{
            width: 100%;
            height: 100%;
            background-color: #c1bfba;
            overflow: hidden;
            display: flex;
            justify-content: center;
            -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;
        }
        .screen{
            width: 94%;
            height: 76%;
            margin-top: 2%;
            background-color: #4a5a1a;
            border: 0.08rem solid #021400;
            border-radius: 0.12rem;
        }
        #score-board{
            width: 100%;
            height: 20%;
            background-color: #2d3120;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
        }
        #score{
            background: url("../images/game/score.png") no-repeat;
            background-size: 100%;
            width: 4rem;
            height: 2rem;
        }
        #level{
            background: url("../images/game/level.png") no-repeat;
            background-size: 100%;
            width: 4rem;
            height: 2rem;
        }
        /*#lines{*/
            /*background: url("../images/game/lines.png") no-repeat;*/
            /*background-size: 100%;*/
            /*width: 3rem;*/
            /*height: 1.5rem;*/
        /*}*/
        #next-shape{
            background: url("../images/game/preview.png") no-repeat;
            background-size: 100%;
            width: 4rem;
            height: 3rem;
            z-index: 10;
        }
        #content{
            height: 80%;
            width: 100%;
            display: flex;
        }
        #board{
            width: 100%;
            height: 100%;
            background-color: #a8b085;
        }
        .wall{
            background: url("../images/game/wall.png") repeat-y;
            background-size: 100%;
            width: 2rem;
            height: 100%;
        }
        .left-wall{
            justify-content: flex-start;
        }
        .right-wall{
            justify-content: flex-end;
        }
        .button{
            width: 5.25rem;
            height: 5.25rem;
            background: url("../images/game/button-bg.png") no-repeat;
            background-size: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }
        .middle{
            width: 1.55rem;
            height: 1.55rem;
            background: url("../images/game/key-mid.png") no-repeat;
            background-size: 100%;
            position: relative;
        }
        .middle li{
            width: 1.55rem;
            height: 1.4rem;
            background: url("../images/game/dir-key.png") no-repeat;
            background-size: 100%;
            position: absolute;
        }
        .top{
            top: -1.38rem;
        }
        .right{
            right: -1.4rem;
            top: 0.07rem;
            transform:rotate(90deg);
            -ms-transform:rotate(90deg);    /* IE 9 */
            -moz-transform:rotate(90deg);   /* Firefox */
            -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
            -o-transform:rotate(90deg);     /* Opera */
        }
        .left{
            left: -1.4rem;
            top: 0.07rem;
            transform:rotate(-90deg);
            -ms-transform:rotate(-90deg);   /* IE 9 */
            -moz-transform:rotate(-90deg);  /* Firefox */
            -webkit-transform:rotate(-90deg); /* Safari 和 Chrome */
            -o-transform:rotate(-90deg);    /* Opera */
        }
        .down{
            bottom: -1.35rem;
            transform:rotate(180deg);
            -ms-transform:rotate(180deg);   /* IE 9 */
            -moz-transform:rotate(180deg);  /* Firefox */
            -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
            -o-transform:rotate(180deg);    /* Opera */
        }
        .sound{
            width: 4rem;
            height: 2rem;
            background: url("../images/game/sound.png") no-repeat;
            background-size: 100%;
            align-self: flex-end;
        }
        .right-btn{
            width: 4.2rem;
            height: 5.5rem;
            background: url("../images/game/shape.png") no-repeat;
            background-size: 100%;
        }
        /*index end*/

    </style>
    <script>
        var iScale = 1 / window.devicePixelRatio;
        document.write('<meta name="viewport" content="width=device-width,initial-scale='+iScale+',minimum-scale='+iScale+',maximum-scale='+iScale+',user-scalable=no"/>');
    </script>
    <!--动态设置html字体大小-->
    <script>
        var iWidth = document.documentElement.clientWidth;
        document.getElementsByTagName('html')[0].style.fontSize = iWidth / 15 + 'px';
        window.onresize = function(){
            var iWidth = document.documentElement.clientWidth;
            document.getElementsByTagName('html')[0].style.fontSize = iWidth / 15 + 'px';
        }
    </script>
    <style type="text/css">
    </style>
</head>
<body>
<div class="container">
    <div class="screen">
        <div id="score-board">
            <canvas id="score"></canvas>
            <canvas id="level"></canvas>
            <!--<div id="lines"></div>-->
            <canvas id="next-shape"></canvas>
        </div>
        <div id="content">
            <div class="wall left-wall"></div>
            <canvas id="board"></canvas>
            <div class="wall right-wall"></div>
        </div>
    </div>
    <div class="button">
       <div class="middle">
           <ul>
               <li class="top shape"></li>
               <li class="right"></li>
               <li class="down"></li>
               <li class="left"></li>
           </ul>
       </div>
    </div>
    <div class="sound"></div>
    <div class="right-btn shape"></div>
</div>
<!--<canvas id="timer"></canvas>-->
<!-- <script src="js/fastclick.js"></script>
<script src="js/jquery-1.8.3.min.js"></script> -->
<script src="../js/game/tetris.js"></script>
</body>
</html>
